import { ElMessageBox } from 'element-plus'
import './dialog-model.css'

const DialogModel = (props) => {
  const defaultOptione = {
    className: '',
    title: '提示',
    message: '',
    cancelTitle: '取消',
    confirmTitle: '确定',
    titleable: true, //是否展示title
    closeable: false, //是否展示关闭按钮
    cancelable: true, // 是否展示取消按钮
    confirmable: true, //是否展示确定按钮
    clickModal: true, //是否可通过点击遮罩层关闭
    cancel: () => {}, //取消事件
    confirm: () => {}, //确定事件
  }
  const options = {
    ...defaultOptione,
    ...props,
  }

  ElMessageBox({
    customClass: `dialog-model ${options.className}`,
    title: '',
    message: `<div class="title">${options.titleable ? options.title : ''}</div>
    <div class="message">${options.message}</div>
   `,
    showClose: options.closeable,
    dangerouslyUseHTMLString: true,
    showConfirmButton: options.confirmable,
    showCancelButton: options.cancelable,
    cancelButtonText: options.cancelTitle,
    confirmButtonText: options.confirmTitle,
    closeOnClickModal: options.clickModal,
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        options.confirm && options.confirm()
        done()
      } else {
        options.cancel && options.cancel()
        done()
      }
    },
  })
}

export default DialogModel
